<template>
  <div class="font-style-box">
        <div class="font-family-box">
            <el-row gutter="8">
                <el-col span="8" :style="{textAlign: 'right'}">
                    <label class="input-label">字体</label>
                </el-col>
                <el-col span="16">
                    <el-select
                        size="mini"
                        :value="get('style.fontFamily', '')"
                        @change="(value) => update({
                            changes: [{
                                path: 'style.fontFamily',
                                value,
                            }]
                        })"
                    >
                        <el-option value="宋体">宋体</el-option>
                        <el-option value="仿宋">仿宋</el-option>
                        <el-option value="微软雅黑">微软雅黑</el-option>
                    </el-select>
                </el-col>
            </el-row>
        </div>
        <div style="padding: 8px 0;">
            <el-row gutter="8" class="font-size-box">
                <el-col span="8" :style="{textAlign: 'right'}">
                    <label class="input-label">字号</label>
                </el-col>
                <el-col span="12">
                    <el-select
                        size="mini"
                        :value="get('style.fontSize', 12)"
                        @change="(value) => update({
                            changes: [{
                                path: 'style.fontSize',
                                value,
                            }]
                        })"
                    >
                        <el-option
                            v-for="item in 50"
                            :key="item"
                            :value="item"
                        >{{item}}</el-option>
                    </el-select>
                </el-col>
                <el-col span="4" class="font-color">
                    <el-color-picker
                        class="input-box"
                        show-alpha
                        :value="get('style.color', '#000')"
                        @change="(value) => update({
                            changes: [{
                                path: 'style.color',
                                value,
                            }]
                        })"
                    ></el-color-picker>
                </el-col>
            </el-row>
        </div>
        <div style="text-align:center;">
            <el-row gutter="8">
                <el-col span="10">
                    <el-checkbox-group
                        size="mini"
                        v-model="fontDecorate"
                        @change="fontChange"
                    >
                        <el-checkbox-button v-for="style in textStyle" :label="style" :key="style">
                            <i :class="`fa fa-${style}`"></i>
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col span="14">
                    <el-radio-group
                        size="mini"
                        v-model="textAlign"
                        @change="textAlignChange"
                    >
                        <el-radio-button label="left"><i class="fa fa-align-left"></i></el-radio-button>
                        <el-radio-button label="justify"><i class="fa fa-align-justify"></i></el-radio-button>
                        <el-radio-button label="center"><i class="fa fa-align-center"></i></el-radio-button>
                        <el-radio-button label="right"><i class="fa fa-align-right"></i></el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    props: ['get'],
    inject: ['update'],
    data() {
        return {
            textStyle: ['bold', 'underline', 'italic'],
            textAlign: 'left',
            fontDecorate: [],
        };
    },
    watch: {
        targetAlign(val) {
            this.textAlign = val;
        },
        fontStyle(val) {
            this.fontDecorate = val;
        }
    },
    computed: {
        fontStyle() {
            const fontWeight = this.get('style.fontWeight', 'normal');
            const fontStyle = this.get('style.fontStyle', 'normal');
            const textDecorate = this.get('style.textDecorate', 'none');
            const font = [];
            if (fontWeight === 'bold') {
                font.push('bold');
            }
            if (fontStyle === 'italic') {
                font.push('italic');
            }
            if (textDecorate === 'underline') {
                font.push('underline');
            }
            return font;
        },
        targetAlign() {
            return this.get('style.textAlign', 'left');
        }
    },
    methods: {
        fontChange() {
            const value = this.fontDecorate;
            this.update({
                changes: [{
                    path: 'style.fontWeight',
                    value: value.includes('bold') ? 'bold' : 'normal',
                }, {
                    path: 'style.fontStyle',
                    value: value.includes('italic') ? 'italic' : 'normal',
                }, {
                    path: 'style.textDecorate',
                    value: value.includes('underline') ? 'underline' : 'none',
                }]
            });
        },
        textAlignChange(e) {
            this.update({
                changes: [{
                    path: 'style.textAlign',
                    value: this.textAlign,
                }]
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-color-picker {
    height: 22px;
    width: 100%;
    .el-color-picker__trigger {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        border: solid 1px #DEDEDE;
    }
    .el-color-picker__icon {
        display: none;
    }
    .el-color-picker__empty {
        display: none;
    }
}
/deep/ .el-checkbox-button__inner {
    padding: 6px 8px;
    border-radius: 0;
}
/deep/ .el-radio-button__inner {
    padding: 6px 8px;
    border-radius: 0;
}
.font-color {
    display: flex;
    align-items: center;
}
.font-size-box {
    display: flex;
    align-items: center;
}
</style>